<script setup>
import api from '../api/book_api.js'
import category_api from "../api/category_api.js";
import {ref,onMounted} from "vue";
import {ElMessageBox} from "element-plus";
import lodash from 'lodash'
import bookshelf_api from "@/api/bookshelf_api.js";

// 定义绑定的数据
// 表格中的数据
const tableData=ref([]);

const editWinVisible=ref(false);

const addWinVisible=ref(false);
// 查询数据
const searchObj=ref({
  current:1,
  limit:10,
  book_name:'',
  bookshelf_name:'',
  publisher:'',
  author:'',
  isbn:'',
  num:'',
  detail:'',
  category_name:'',
});

const obj=ref({});

const total=ref(0);

const search = async () => {
  var result=await api.page(searchObj.value);
  tableData.value=result.data;
  total.value=result.count;
}
// 页面加载后要挂载的数据
onMounted(async ()=>{
  search();
});

// 定义方法

const handleSizeChange = () => {
  search();
}

const handleCurrentChange = () => {
  search();
}

const handlerSearch = () => {
  searchObj.value.current=1;
  search();
}

const bookshelf=ref( []);
const category=ref( []);
const handlerAdd = async () => {
  bookshelf.value=await bookshelf_api.all();
  category.value=await category_api.all();
  obj.value={};
  addWinVisible.value=true;
}

const editCancel = () => {
  obj.value={};//清空数据
  editWinVisible.value=false; //关闭对话框
}

const addCancel = () => {
  obj.value={};//清空数据
  addWinVisible.value=false; //关闭对话框
}

const editCommit = async () => {
  await api.edit(obj.value);
  search();//重新加载数据
  editWinVisible.value=false;//关闭对话框
}

const addCommit = async () => {
  await api.add(obj.value);
  search();//重新加载数据
  addWinVisible.value=false;//关闭对话框
}

const handleEdit = async (index, row) => {
  bookshelf.value=await bookshelf_api.all();
  category.value=await category_api.all();
  obj.value=lodash.clone(row);
  editWinVisible.value=true;
  console.log(index, row)
}

// 时间格式化函数
const formatDate = (dateString) => {
  if (!dateString) return ''

  try {
    // 创建日期对象
    const date = new Date(dateString)

    // 检查日期是否有效
    if (isNaN(date.getTime())) return dateString

    // 格式化为 YYYY-MM-DD HH:mm:ss
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  } catch (error) {
    console.error('日期格式化错误:', error)
    return dateString
  }
}

const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确认删除该数据吗',
      '删除提示',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        api.del(row.id);
        //重新加载数据
        //设置从第一页开始
        searchObj.value.current=1;
        search();
      })

      .catch(() => {
      })
}
</script>

<template>
  <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin-top: 20px">
    <el-form-item label="书籍名">
      <el-input v-model="searchObj.book_name" placeholder="请输入书籍名称" clearable />
    </el-form-item>

    <el-form-item label="作者">
      <el-input v-model="searchObj.author" placeholder="请输入作者" clearable />
    </el-form-item>

    <el-form-item label="书籍类别">
      <el-input v-model="searchObj.category_name" placeholder="请输入书籍类别" clearable />
    </el-form-item>

    <el-form-item label="书架">
      <el-input v-model="searchObj.bookshelf_name" placeholder="请输入书架" clearable />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="handlerSearch">查询</el-button>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="handlerAdd">新增</el-button>
    </el-form-item>

  </el-form>

  <el-table :data="tableData" style="width: 100%">

    <el-table-column label="书名" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span >{{ scope.row.book_name}}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="书架" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span >{{ scope.row.bookshelf_name}}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="出版社" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span >{{ scope.row.publisher}}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="作者" width="100">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span >{{ scope.row.author}}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="类别" width="80">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span >{{ scope.row.category_name}}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="国际书号" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span >{{ scope.row.isbn}}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="馆藏数量" width="80">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span >{{ scope.row.num}}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="入库时间" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span >{{ formatDate(scope.row.create_time)}}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          修改信息
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--分页-->
  <el-pagination
      style="margin-top:20px"
      v-model:current-page="searchObj.current"
      v-model:page-size="searchObj.limit"
      :page-sizes="[10, 20, 30, 50]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />

  <!--编辑对话框-->
  <el-dialog v-model="editWinVisible" title="编辑" width="500">
    <el-form :model="obj">
      <el-form-item label="书名" :label-width="100">
        <el-input v-model="obj.book_name"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="书架" :label-width="100">
        <el-select
            v-model="obj.bookshelf_name"
            placeholder="请选择"
        >
          <el-option
              v-for="item in bookshelf"
              :key="item.id"
              :label="item.floor+item.area+item.frame"
              :value="item.floor+item.area+item.frame"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出版社" :label-width="100">
        <el-input v-model="obj.publisher"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="作者" :label-width="100">
        <el-input v-model="obj.author"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="类别名称" :label-width="100">
        <el-select
            v-model="obj.category_name"
            placeholder="请选择"
        >
          <el-option
              v-for="item in category"
              :key="item.id"
              :label="item.name"
              :value="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="国际书号" :label-width="100">
        <el-input v-model="obj.isbn"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="馆藏数量" :label-width="100">
        <el-input v-model="obj.num"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="书籍简介" :label-width="100">
        <el-input v-model="obj.detail"  autocomplete="off" />
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editCancel">取消</el-button>
        <el-button type="primary" @click="editCommit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="addWinVisible" title="新增" width="500">
    <el-form :model="obj">
      <el-form-item label="书名" :label-width="100">
        <el-input v-model="obj.book_name"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="书架" :label-width="100">
        <el-select
            v-model="obj.bookshelf_name"
            placeholder="请选择"
        >
          <el-option
              v-for="item in bookshelf"
              :key="item.id"
              :label="item.floor+item.area+item.frame"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出版社" :label-width="100">
        <el-input v-model="obj.publisher"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="作者" :label-width="100">
        <el-input v-model="obj.author"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="类别名称" :label-width="100">
        <el-select
            v-model="obj.category_name"
            placeholder="请选择"
        >
          <el-option
              v-for="item in category"
              :key="item.id"
              :label="item.name"
              :value="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="国际书号" :label-width="100">
        <el-input v-model="obj.isbn"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="馆藏数量" :label-width="100">
        <el-input v-model="obj.num"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="书籍简介" :label-width="100">
        <el-input v-model="obj.detail"  autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addCancel">取消</el-button>
        <el-button type="primary" @click="addCommit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped></style>